AngularJS，实现contenteditable的双向绑定

前言

在项目中遇到需要使用contenteditable来替代textarea，实现输入内容的自动高度，但是div或者p这样的标签并不是一个输入控件，不能直接被ngModel绑定，这个时候就需要把contenteditable做成一个directive来实现双向绑定：

代码

app.directive('contenteditable', function () {
    return {
        require: 'ngModel',
        link: function (scope, element, attrs, ctrl) {
            /*输入回车的时候会转义成<br>被提交，所以去掉回车的输入*/
            function deleteBr(sHtml) {
                return sHtml.replace(/<br>/g, "");
            }
            // view -> model
            element.bind('input', function () {
                scope.$apply(function () {
                    element.html(deleteBr(element.html()));
                    ctrl.$setViewValue(element.html());
                });
            });

            // model -> view
            ctrl.$render = function () {
                element.html(ctrl.$viewValue);
            };

            // load init value from DOM
            ctrl.$render();
        }
    };
});

注意

• 在div中输入回车是会被转义成
  ，而在实际使用中可能需要禁止回车，所以在directive中需要把回车产生的
  过滤掉；

• 在html中需要设置contenteditable="plaintext-only"控制输入的内容为纯文本，因为复制过来的一些内容可能会被带上一些文字样式；

• 在model中输入<> 会被转义，解决办法是在controller里面先过滤一遍数据（输出的时候也需要过滤一次）

    function html2Escape(sHtml) {
        return sHtml.replace(/[<>&"]/g, function (c) {
            return {'<': '&lt;', '>': '&gt;', '&': '&amp;', '"': '&quot;'}[c];
        });
    }
    $scope.text= html2Escape($scope.text)